<template>
  <div>
    <search context="查找记录" @search-name="searchName" />
    <div class="enter-container">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{backgroundColor: '#f6f6f6',
                             color: '#0b0b0b', padding: '9px 0'}"
        :cell-style="{color:'#0b0b0b', padding: '10px 0'}"
        stripe
      >
        <el-table-column align="center" prop="runId" label="#" width="100" />
        <el-table-column align="center" prop="submitTime" label="时间" width="170" />
        <el-table-column align="center" prop="user.userName" label="用户名" width="90">
          <span slot-scope="scope">
            <detail-profile :id="scope.row.user.userId" :user-name="scope.row.user.userName" />
          </span>
        </el-table-column>
        <el-table-column align="center" prop="ojName" label="OJ" width="110" />
        <el-table-column align="center" prop="problemId" label="题目编号">
          <template slot-scope="scope">
            <el-link type="primary" :underline="false" :href="scope.row.problemUrl">{{ scope.row.problemId }}</el-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="submitLanguage" label="语言" width="120" />
        <el-table-column align="center" prop="submitStatus" label="评测结果" width="210">
          <template slot-scope="scope">
            <span :style="getResultColor(scope.row.submitStatus)">{{ scope.row.submitStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="runTime" label="耗时" width="85" />
        <el-table-column align="center" prop="runMemory" label="内存" width="80" />
      </el-table>
      <el-pagination
        :page-size="pageSize"
        :current-page="page"
        :total="total"
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>
import { resultColorMixin } from '@/common/mixins'
import { dynamic } from '@/networks/dynamic'
import Search from '@/components/Search'
import DetailProfile from '@/components/detailProfile'

export default {
  name: 'RealtimeStatusTable',
  components: { DetailProfile, Search },
  mixins: [resultColorMixin],
  data() {
    return {
      loading: true,
      tableData: [],
      total: 100,
      page: 1,
      pageSize: 20,
      userName: ''
    }
  },
  mounted() {
    this.init()
  },
  activated() {
    this.init()
  },
  methods: {
    searchName(userName) {
      this.userName = userName
      this.init()
    },
    handleCurrentChange(index) {
      this.page = index
      this.init()
    },
    init() {
      // 封装数据
      this.loading = true
      dynamic({ page: this.page, userName: this.userName })
        .then(res => {
          this.loading = false
          if (res.data.status === 1) {
            const data = res.data.data
            this.total = data.total
            this.pageSize = data.pageSize
            this.tableData = data.list
          } else {
            this.$message.warning(res.data.msg)
          }
        })
    }
  }
}
</script>

<style scoped>
  .el-pagination {
    margin-top: 20px;
    padding-bottom: 30px;
  }

  .enter-container {
    height: auto;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
    background-color: #ffffff;
    margin-top: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
</style>
